<template>
  <div class="detail-page">
    <el-page-header  @back="$router.back()" />
    <el-card v-if="true" class="mt-4">
      
      <template #header></template>
        <div class="review-detail-page">
    <el-row :gutter="24">
      <!-- 左侧订单信息 -->
      <el-col :span="10">
        <div class="order-info-card">
          <h3>订单信息</h3>
          <div>订单编号：{{ orderDetail.orderBasic.orderNo }} <el-link @click="copy(orderDetail.orderNo)" :underline="false">复制</el-link></div>
          <div>下单时间：{{ orderDetail.orderBasic.orderTime }}</div>
          <div>成交时间：{{ orderDetail.finishTime }}</div>
          <div>买家昵称：{{ orderDetail.buyerName }}</div>
          <div>店铺名称：{{ orderDetail.shopName }}</div>
          <div>配送方式：{{ orderDetail.deliveryType }}</div>
          <div>
            配送员：
            <el-link type="primary" :href="'tel:' + orderDetail.riderPhone" target="_blank">
              {{ orderDetail.riderName }}，{{ orderDetail.riderPhone }}
            </el-link>
          </div>
          <div class="goods-list">
            <div v-for="item in orderDetail.goods" :key="item.name + item.spec + item.spicy" class="goods-item">
              <img :src="item.img" class="goods-img" />
              <div>
                <div>{{ item.name }} <span style="color:#888;">{{ item.brand }}</span></div>
                <div class="goods-desc">规格：{{ item.spec }}，辣度：{{ item.spicy }}</div>
              </div>
              <div class="goods-qty">x{{ item.qty }}</div>
            </div>
          </div>
        </div>
      </el-col>
      <!-- 右侧评价内容 -->
      <el-col :span="14">
        <div class="comment-card">
          <h3>评价内容</h3>
          <div v-for="comment in comments" :key="comment.id" class="comment-item">
            <div class="comment-header">
              <img :src="comment.avatar" class="avatar" />
              <span class="nickname">{{ comment.nickname }}</span>
              <el-tag size="small" :type="comment.role === '买家' ? 'info' : 'warning'">{{ comment.role }}</el-tag>
              <span class="comment-time">{{ comment.time }}</span>
            </div>
            <el-rate v-model="comment.star" disabled size="small" />
            <div class="comment-content">{{ comment.content }}</div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>



    </el-card>
    <el-empty v-else description="加载中…" />
  </div>
</template>







<script setup>
import { useRoute } from 'vue-router'
import { onMounted, ref } from 'vue'
import { getReviewDetailById,getOrderDetail } from '@/api/order'
import { ElMessage } from 'element-plus'
const route = useRoute()    
const orderId = ref(route.params.id) 

const orderDetail  = ref(null)
const reviewList = ref([])
const loading   = ref(false)
const errorMsg  = ref('')

async function fetchOrderDetail (orderId) {
  loading.value  = true
  orderDetail.value   = null
  errorMsg.value = ''
  console.log(id.value)
  try {
    const resp = await getOrderDetail(orderId)
    orderDetail.value = resp.data          // 后端 AjaxResult.success(data)
  } catch (err) {
    errorMsg.value = err?.msg || '加载失败'
    ElMessage.error(errorMsg.value)
  } finally {
    loading.value = false
  }
}


async function fetchReviewList (orderId) {
  
  
  reviewList.value = null
  
  try {
    const resp = await getReviewDetailById(orderId)
    reviewList.value = resp.data          // 后端 AjaxResult.success(data)
  } catch (err) {
    errorMsg.value = err?.msg || '加载失败'
    ElMessage.error(errorMsg.value)
  } finally {
    loading.value = false
  }
}
// async function fetchDetail (orderId) {
//   loading.value  = true
//   detail.value   = null
//   errorMsg.value = ''
//   console.log(id.value)
//   try {
//     const resp = await getReviewDetail(orderId)
//     detail.value = resp.data          // 后端 AjaxResult.success(data)
//   } catch (err) {
//     errorMsg.value = err?.msg || '加载失败'
//     ElMessage.error(errorMsg.value)
//   } finally {
//     loading.value = false
//   }
// }



onMounted(() => fetchOrderDetail(orderId.value))
onMounted(() => fetchReviewList(orderId.value))
</script>


<style scoped>
.review-detail-page {
  padding: 24px;
  background: #f8fafc;
  min-height: 100vh;
}
.order-info-card, .comment-card {
  background: #f7faff;
  border-radius: 12px;
  padding: 18px 22px 14px 22px;
  margin-bottom: 18px;
  box-shadow: 0 2px 8px #f0f1f2;
}
.goods-list {
  margin-top: 16px;
}
.goods-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.goods-img {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #eee;
  margin-right: 12px;
}
.goods-desc {
  font-size: 13px;
  color: #888;
}
.goods-qty {
  margin-left: auto;
  font-weight: 500;
  font-size: 16px;
}
.comment-item {
  background: #fff;
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 16px;
  box-shadow: 0 1px 4px #f0f1f2;
}
.comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 10px;
}
.nickname {
  font-weight: 500;
  margin-right: 8px;
}
.comment-time {
  color: #888;
  font-size: 13px;
  margin-left: auto;
}
.comment-content {
  margin-top: 4px;
  font-size: 15px;
}
</style>